<!DOCTYPE HTML>
<html>
<head>
    <meta charset="UTF-8">
    <title>用户总览</title>
    <link rel="stylesheet" type="text/css" href="layui/css/layui.css">
    <style type="text/css">
        .layui-table-cell {
            height: 100%;
            max-width: 100%;
        }
    </style>
</head>
<body>

<form class="layui-form">

    <div class="layui-inline">
        <div class="layui-input-inline" style="width: 150px">
            <select name="column" id="column">
                <option value="">请选择搜索条件</option>
                <option value="name">姓名</option>
                <option value="mobile">手机号</option>
            </select>
        </div>
        <div class="layui-input-inline">
            <input style="width: 300px" type="text" id="value" name="value" lay-verify="required" placeholder="请输入搜索内容" autocomplete="off" class="layui-input">
        </div>
    </div>
    <button type="button" class="layui-btn" id="search">搜索</button>
</form>

<table id="userTable" lay-filter="userTable"></table>




<script type="text/javascript" src="layui/layui.js"></script>
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript">


    layui.use(['table','form','layer'],function () {

        var table = layui.table;
        var form = layui.form;
        var layer = layui.layer;
        table.render({
            elem:'#userTable'
            ,url:'house-user/list'
            ,page:true
            ,limit:6
            ,limits:[4,6,8,10]
            ,cols:[[
                {field:'id',title:'编号',sort:true, width:80, align:'center'}
                ,{field:'name', title:'用户名', align:'center'}
                ,{field:'mobile',title:'手机号', align:'center'}
                ,{field:'createdDate',title:'注册时间',sort:true, align:'center'}
            ]]
        });

        /**
         * 搜索功能
         * */
        $("#search").click(function () {
            var column = $("#column").val();
            var value = $("#value").val();

            if(column == ""){
                table.reload("userTable",{
                    url:'house-user/list',
                    page:{
                        curr:1
                    }
                });
            }else{
                table.reload("userTable",{
                    url:'house-user/search',
                    where:{
                        column: column,
                        value: value
                    }
                });
            }
        });





    });
</script>


</body>
</html>